<template>
    <div class="main-content">
        <div class="container container-heading">
            <span class="title">Watchlist</span>
            <router-link to="" class="btn btn-recap">
                <span class="label">View your weekly
                    Recap</span>
                <i class="icon icon--arrow-right"></i>
            </router-link>
        </div>
        <div class="argus__body">
            <div class="watchlist__container expanded">
                <div class="header__screen">
                    <div class="header--watchlist">
                        <div class="watchlist-header__list">
                            <button class="watchlist__title i-down">New watchlist</button>
                        </div>
                        <div class="watchlist-header__search">
                            <label class="searchLabel">Add Symbol</label>
                            <el-icon class="icon-search" @click="handleSearch">
                                <Search />
                            </el-icon>
                            <input type="text" class="searchBar" v-model="searchQuery" @keyup.enter="handleSearch"
                                placeholder="Add Symbol" autocomplete="off">
                            <div class="dropdownWL" v-if="searchList.length > 0">
                                <ul class="dropdownWL__body">
                                    <li class="dropdownWL__item" v-for="item in searchList" :key="item.uuid"
                                        @click="addList(item.symbol)">
                                        <div class="searchResult__ticker">{{ item.symbol }}</div>
                                        <div class="searchResult__name">{{ item.company_name }}</div>
                                        <div class="searchResult__change neg">{{ item.change_money }} {{
                                            (item.change_ratio) }}</div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="watchlist__instruction" v-if="watchData.length === 0">
                    There are currently no items in your watchlist. Add items by using the search box above.
                </div>
                <div class="watchlist" v-else>
                    <div class="portfolio__allocation">
                        <small class="input__label">Asset
                            Allocation</small>
                        <div class="allocation__container">
                            <div class="allocation__bar">
                                <div class="list--allocation"><span class="list__item" style="width:100%">
                                        <div class="tooltip left"><span class="symbol">Stock</span><span
                                                class="percent">100<!-- -->%</span></div>
                                    </span></div>
                                <button class="table__toggle" @click="ishide = !ishide">
                                    <i :class="[{ 'iconRote': ishide }, 'icon', 'icon--caret-down']"></i>
                                </button>
                            </div>
                            <div class="overflow--slider" style="margin-top:15px;" v-if="ishide">
                                <table class="table table--allocation">
                                    <tbody>
                                        <tr class="table__row">
                                            <th class="table__heading">Asset</th>
                                            <th class="table__heading">%</th>
                                        </tr>
                                        <tr class="table__row">
                                            <td class="table__cell">Stock</td>
                                            <td class="table__cell align--right">100</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="watchlist__options">
                                <div class="align-left">As of {{ currentTime }}</div>
                                <div class="align-right">
                                    <div class="text">
                                        Expanded/Condensed
                                        <el-switch v-model="isopen" class="ml-2"
                                            style="--el-switch-on-color: #367f2e; --el-switch-off-color: #939398" />
                                    </div>
                                    <!-- <el-icon class="el-download">
                                        <Download />
                                    </el-icon> -->
                                </div>
                            </div>
                            <!-- 表格 -->
                            <div class="watchlist__body">
                                <div class="border" v-for="item in watchData" :key="item.uuid">
                                    <div class="top" v-if="isopen">
                                        <div class="left">
                                            <router-link :to="{ name: 'stockDetail', params: { symbol: item.symbol } }"
                                                class="symbol">
                                                {{ item.symbol }}
                                            </router-link>
                                            <router-link :to="{ name: 'stockDetail', params: { symbol: item.symbol } }"
                                                class="name">{{ item.company_name }}</router-link>
                                            <span class="open"><i class="icon--sun"></i>OPEN</span>
                                        </div>
                                        <div class="right">
                                            <span class="remove" @click="removeItem(item)"><el-icon>
                                                    <DeleteFilled />
                                                </el-icon>REMOVE</span>
                                            <!-- <span class="label">Add Holdings</span> -->
                                        </div>
                                    </div>
                                    <ul class="list">
                                        <li class="list-item item-price">
                                            <span class="title">LAST</span><br>
                                            <span class="cont">{{ item.close }}</span>
                                        </li>
                                        <li class="list-item">
                                            <span class="title">CHG</span><br>
                                            <span class="cont">{{ item.change_money }}</span>
                                        </li>
                                        <li class="list-item">
                                            <span class="title">% CHG</span><br>
                                            <span class="cont">{{ item.change_ratio }}%</span>
                                        </li>
                                        <li class="list-item item-volume">
                                            <span class="title">VOLUME</span><br>
                                            <span class="cont">{{ item.volume }}</span>
                                        </li>
                                        <li class="list-item item-volume">
                                            <span class="title">AVG VOL</span><br>
                                            <span class="cont">{{ item.volume_ratio }}</span>
                                        </li>
                                        <!-- <li class="list-item item-last">
                                            <span class="title">YEAR/DAY RANGE</span><br>
                                            <div class="range__bar range-year">
                                                <div class="range__data">
                                                    <span class="range__left">292.20</span><span
                                                        class="range__right">381.80</span>
                                                </div>
                                                <div class="range__chart">
                                                    <div class="current" style="left:calc(89.73214285714288% - 3px)">
                                                    </div>
                                                </div>
                                            </div>
                                        </li> -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fixed__container">
                <div class="news__container">
                    <div class="news__header">
                        <div class="sort-header-block" role="tablist">
                            <button :class="[{ 'selected': tabIndex === index }, 'sort-header']"
                                @click="changeBtn(index)" v-for="(item, index) in newTitleList" :key="index">{{
                                    item.name }}
                            </button>
                            <!-- <button class="sort-header selected">Latest News</button> -->
                        </div>
                        <div>
                            <div class="newsSelector"></div>
                        </div>
                    </div>
                    <div class="news__body">
                        <aside class="show-wl">
                            <section class="news__list">
                                <div class="news__empty" v-if="newsRightList.length === 0">No recent news for New
                                    watchlist
                                </div>
                                <ul v-else>
                                    <li class="news__listitem" v-for="v in newsRightList" :key="v.uuid">
                                        <router-link
                                            :to="{ name: 'NewDetail', params: { uuid: v.uuid, author: v.author } }">
                                            <header class="news__header">
                                                <h3 class="news__title">
                                                    <small class="news__label barrons" v-if="tabIndex === 1">{{ v.author
                                                        }}</small><br v-if="tabIndex === 1">
                                                    <div class="link">{{ v.title }}</div>
                                                </h3>
                                                <div class="pos"><router-link class="tickertag" v-if="tabIndex === 0">{{
                                                    v.company }}
                                                    </router-link></div>
                                                <div class="news__date is-today">{{ v.createTime }}</div>
                                            </header>
                                        </router-link>
                                    </li>
                                </ul>
                                <div class="news__actions" v-if="newsRightList.length > 0">
                                    <button class="btn btn-loadmore btn--block" @click="getMore">Load More News
                                    </button>
                                </div>
                            </section>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
        <div class="notes-and-data-providers">
            <provides v-if="isShow" @toClose="toClose"></provides>
            <button class="btn btn--linkSecondary" @click="toShow">
                Notes and Data Providers
                <el-icon v-if="!isShow">
                    <ArrowDownBold />
                </el-icon>
                <el-icon v-else>
                    <ArrowUpBold />
                </el-icon>
            </button>
        </div>
    </div>
</template>
<script setup>
import { usewlDataArrays } from '../../api/watchlist';
import provides from './provides.vue';
import homeRequest from "@/api/home.js";
import { onMounted } from 'vue';
import { getCurrentTime } from "@/utils/common.js"
import { ElMessageBox } from 'element-plus'
// 箭头下拉
const ishide = ref(false)
const watchData = ref([])
// 获取当前时间
const currentTime = ref('')
currentTime.value = getCurrentTime()
//控制显示与隐藏
const isShow = ref(false)
const tabIndex = ref(0)
const newsRightList = ref([])  // 右边数据
const isopen = ref(true) //开关
const sizeValue = ref(10)
const newTitleList = reactive([
    {
        name: 'Watchlist News'
    },
    {
        name: 'Latest News'
    }
])
const changeBtn = (index) => {
    tabIndex.value = index
    if (index === 0) {
        getBtnWatchData()
    } else {
        getList()
    }
}

const toShow = () => {
    isShow.value = !isShow.value
}
const toClose = () => {
    isShow.value = false
}
onMounted(() => {
    getLeftList('watchlist')
    getBtnWatchData()
})
const getLeftList = (value) => {
    let data = {
        current: 1,
        size: 20,
    }
    homeRequest.userWatchlist(data)
        .then((res) => {
            if (res.code === 0) {
                watchData.value = res.data.records
            }
        })
        .catch((e) => {
        });
}
const getBtnWatchData = () => {
    let data = {
        current: 1,
        size: sizeValue.value,
    }
    homeRequest.getWatchData(data)
        .then((res) => {
            if (res.code === 0) {
                newsRightList.value = []
                newsRightList.value = res.data.records
            }
        })
        .catch((e) => {
        });
}
const getList = () => {
    let data = {
        current: 1,
        size: sizeValue.value,
    }
    homeRequest.newsData(data)
        .then((res) => {
            if (res.code == "0") {
                newsRightList.value = []
                newsRightList.value = res.data.records
            }
        })
        .catch((e) => {
        });
}
const getMore = () => {
    sizeValue.value = sizeValue.value + 10
    if (tabIndex.value === 0) {
        getBtnWatchData()
    } else {
        getList()
    }
}
const searchQuery = ref()
const searchList = ref([])
const handleSearch = () => {
    if (searchQuery.value) {
        getSearchList(searchQuery.value)
    }
}
watch(
    () => searchQuery.value,
    (newData, oldData) => {
        if (!newData) {
            searchList.value = []
        }
    })
// 获取搜索的数据
const getSearchList = (value) => {
    let data = {
        symbol: value
    }
    homeRequest.searchData(data)
        .then((res) => {
            if (res.code === 0) {
                if (res.data === null) {
                    searchList.value = []
                } else {
                    searchList.value = res.data
                }
            }
        })
}
// 用户加入关注
const addList = (value) => {
    let data = {
        symbol: value
    }
    homeRequest.addWatchData(data)
        .then((res) => {
            if (res.code === 0) {
                searchList.value = []
                getLeftList('watchlist')
            }
        })
}
const removeItem = (value) => {
    ElMessageBox.confirm('Are you sure?', '', {
        confirmButtonText: 'REMOVE ITEM',  // 更改确认按钮的文字  
        cancelButtonText: 'CANCEL',    // 更改取消按钮的文字  
        type: 'warning'  // 可以选择消息框的类型，如 'warning'、'success' 等  
    })
        .then(() => {
            let data = {
                symbol: value.symbol
            }
            homeRequest.cancelWatchData(data)
                .then((res) => {
                    if (res.code === 0) {
                        getLeftList('watchlist')
                    }
                })
                .catch((e) => {
                });
        })
        .catch(() => {
            // catch error
        })

}
</script>
<style scoped lang='scss'>
.main-content {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.container-heading {
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 20px;
    margin-top: 15px;

    .title {
        font: 800 1.71429rem / 1.25 Muli, sans-serif;
        color: #3677A8;
        margin-right: 10px;
    }
}

.btn-recap {
    background: #B55C21;
    border-radius: 4px;
    display: flex;
    align-items: center;
    height: auto;
    padding: 0 10px;
    color: #fff;
    font-size: 0.85rem;
    margin-top: 8px;
}

.icon--arrow-right:before {
    content: "\e906";
    line-height: 1;
    min-width: 0;
    display: inline-block;
}

.notes-and-data-providers,
.argus__body {
    width: 100%;
    margin-top: 20px;
    display: flex;
}

.argus__body {
    .watchlist__container {
        max-width: 640px;
        flex: 1;
        padding: 0 10px
    }

    .header--watchlist {
        display: flex;
        opacity: 1;
        position: relative;
        right: 0;
        width: 100%;
        transition: .3s left ease-in-out, .3s right ease-in-out, .3s opacity ease-in-out;

        .watchlist-header__list {
            flex: 1;
            height: auto;
            margin-right: 50px;
            max-width: none;
            display: flex;
            align-items: center;
            position: relative;
            text-align: left;
            float: left;
            cursor: pointer;

            .watchlist__title.i-down {
                font: 700 1.28571rem / 1.125 Lato, sans-serif;
                display: flex;
                align-items: center;
                padding: 0 0 0 20px;
                position: relative;
                background-position: left;
                white-space: normal;
                background: url(https://www.marketwatch.com/watchlist/public/i/icon-down.svg) left 0px top 50% no-repeat;
                background-size: 10px 10px
            }

            .watchlist__title.i-down:after {
                font: 400 0.85714rem / 1 Lato, sans-serif;
                content: 'Manage Lists';
                border-left: 1px solid #939398;
                color: #6a6a6a;
                margin-left: 10px;
                padding-left: 10px;
                transition: color .2s ease-in-out;
            }
        }

        .watchlist-header__search {
            padding: 0;
            flex: 1;
            width: auto;
            display: flex;
            align-items: center;
            position: relative;
            left: auto;
            right: auto;
            float: right;

            .searchLabel {
                white-space: nowrap;
                margin-right: 20px;
                font-size: .85714rem;
            }

            input.searchBar {
                animation-duration: 1.5s;
                animation-iteration-count: 100;
                animation-direction: alternate;
                animation-timing-function: ease-in-out;
                border: 1px solid rgba(0, 74, 110, .5);
                height: 36px;
                position: relative;
                font-size: .85714rem;
                color: #6a6a6a;
                width: 100%;
                padding-right: 30px;
                box-shadow: inset 0 0 0 1px #dcdcdc;
                background-size: 18px;
                text-indent: 15px;
            }
        }
    }

    .watchlist-header__list:hover .watchlist__title.i-down:after {
        color: #A05F03;
    }

    .watchlist__instruction {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        box-shadow: none;
        border: 1px solid #e1e1e1;
        background-color: #f7f7f7;
        font-size: 12px;
        text-align: center;
        padding: 15px 10px;
        margin: 0 auto;
        border-radius: 3px;
        margin-top: 10px;
    }

    .news__container {
        max-width: 320px;
        margin-bottom: 20px;
        padding: 0 10px;
        width: 100%;

        .news__header {
            margin-bottom: 10px;
            font-size: 1.2em;
            position: relative;
            z-index: 1;
        }

        .sort-header {
            flex: 1;
            text-align: center;
            padding: 10px;
            text-transform: uppercase;
            border: 1px solid #e1e1e1;
            opacity: 1;
            background-color: #fff;
            font-size: 11px;
            line-height: 14px;
            width: 50%;
        }

        .sort-header.selected {
            color: #fff;
            background-color: #3677A8;
            border: 1px solid #3677A8;
        }
    }
}

.fixed__container {
    width: 100%;
    max-width: 640px;
    display: flex;
}

.news__body {
    position: relative;
    overflow: auto;
    bottom: 0;
    top: 0;
    padding: 10px;
    border: 1px solid #e1e1e1;
    background-color: #f7f7f7;
    width: 100%;
    left: 0;
    right: 0;
    max-height: 592px;
    top: 0;

    .news__empty {
        font-size: 12px;
        padding: 8px;
        margin: 4px 0 0 4px;
        color: #888;
    }

    .news__list {
        ul {
            padding: 5px 0 0;
            margin: 0;

            .news__listitem:first-child {
                border-top: none;
            }

            .news__listitem {
                margin: 0 0 10px;
                padding: 0 0 10px;
                background: 0 0;
                border-bottom: solid 1px #e1e1e1;
                transition: .3s all ease-in-out;

                .news__header {
                    display: flex;
                    margin-bottom: 0;
                    flex-flow: column;
                    height: auto;
                    font-size: 1.2em;
                    border-bottom: none;

                    .news__title {
                        margin: 0 0 2px;
                        font-size: 1rem;
                    }

                    .news__label.barrons {
                        color: #00529c;
                    }

                    .news__label {
                        display: inline-block;
                        margin-right: 2.5px;
                        text-transform: uppercase;
                        font-size: .78571rem;
                        line-height: 1;
                        font-weight: 700;

                        .link {
                            color: #122225;
                            margin: 0;
                            font-size: 14px;
                            line-height: 16px;
                            font-weight: bold;
                        }
                    }

                    .news__date {
                        order: -1;
                        margin-bottom: 3px;
                        color: #6a6a6a;
                        font-size: .85714rem;
                        font-weight: 600;
                    }
                }
            }
        }
    }
}

.notes-and-data-providers .btn:hover {
    color: #3677A8;
    background-color: transparent;
}

.notes-and-data-providers {
    border-bottom: solid 1px #e1e1e1;
    padding: 10px 0px;
    display: block
}

.news__actions {
    padding: 0;
    margin: 10px 0 5px;
    font-size: 12px;
    height: 30px;
    line-height: 30px;

    .btn--block:hover {
        background-color: #dcdcdc;
    }

    .btn {
        background-color: #3677A8;
        padding: 0 10px;
        height: 36px;
        line-height: 36px;
        font-size: .85714rem;
        color: #fff;
        width: 100%;
    }
}

@media (max-width: 1296px) {

    .argus__container,
    .container,
    .main-content {
        max-width: 960px
    }

    .fixed__container {
        max-width: 320px;
        flex-flow: column
    }

    .fixed__container.fixed {
        left: auto;
        right: 50%;
        transform: translate(480px);
        display: flex
    }
}

@media (max-width: 1220px) {
    .main-content {
        padding: 0
    }
}

@media (max-width: 976px) {
    .argus__body {
        flex-wrap: wrap
    }

    .argus__body .news__container,
    .argus__body .watchlist__container {
        max-width: 100%;
        flex: 100%;
        margin-bottom: 20px
    }

    .argus__container,
    .container,
    .fixed__container,
    .main-content {
        max-width: 640px
    }

    .fixed__container {
        display: block
    }

    .fixed__container.fixed {
        position: static;
        transform: none;
        padding-top: 0
    }

    .fixed__container.fixed.at-bottom {
        position: static
    }

    .news__body {
        max-height: 100% !important
    }
}

.allocation__bar {
    flex-wrap: wrap;
    position: relative;
    display: flex;

    .list--allocation {
        height: 25px;
        flex: 1;
        margin-bottom: 0;
        background: 0 0;

        .list__item {
            position: relative;
            display: inline-block;
            height: 100%;
            min-width: 1%;

            .tooltip.left {
                left: 50%;
                margin: 0;
            }

            .tooltip {
                position: absolute;
                bottom: 15px;
                left: 50%;
                z-index: 10;
                display: none;
                margin-left: -75px;
                color: #fff;
                background: #2e2e2e;
                min-width: 150px;
                text-align: center;
                padding: 10px;

                .symbol {
                    font-weight: 700;
                    font-size: 1.14286rem;
                    display: block;
                    margin-bottom: 5px;
                }

                .percent {
                    display: block;
                    letter-spacing: .025em;
                    font-size: .71429rem;
                    text-transform: uppercase;
                }
            }
        }

        .list__item:nth-of-type(9n+1) {
            background: #112534;
        }

        .list__item:last-of-type {
            border-right: none;
        }
    }
}

.allocation__container {
    .table__toggle {
        flex: 0;
        border: 1px solid #e1e1e1;
        background-color: #f7f7f7;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 5px;
        padding: 0 7px;
        min-width: 25px;

        .icon {
            font-size: .71429rem;
            color: #6a6a6a;
            transition: .2s transform ease-out;
        }

        .icon--caret-down:before {
            content: "\e908";
        }
    }

    .table__toggle:hover {
        cursor: pointer;
    }
}

.iconRote {
    transform: rotate(180deg);
}

.tickertag {
    color: #367f2e;
    margin: 0 10px 0 0;
    border-radius: 0;
    font-size: .85714rem;
    font-weight: 500;
    margin-right: 5px;
}

.tickertag:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    display: inline-block;
    margin-bottom: 2px;
    border-bottom: 4px solid #367f2e;
    margin-left: 2px;
}

.watchlist__options {
    display: flex;
    justify-content: space-between;
    margin: 30px 0 10px;

    .el-switch__core {
        min-width: 30px;
    }

    .align-right {
        display: flex;

        .text {
            color: #6a6a6a;
            font-size: .85714rem;
        }
    }

    .el-download {
        margin-top: 5px;
        font-size: 20px;
        margin-left: 10px;
    }
}

.border {
    border: 1px solid #e1e1e1;
    padding: 10px 2px;

    .top {
        display: flex;
        justify-content: space-between;

        .left {
            padding-left: 8px;

            .symbol {
                background: #3677A8;
                color: #fff;
                padding: 2px 3px;
            }

            .name {
                color: #242424;
                font-size: 1rem;
                font-weight: bold;
                margin-left: 5px;
            }

            .open {
                color: #2e2e2e;
                font-size: 0.857rem;
                font-weight: 500;
                margin-left: 10px;

                .icon--sun:before {
                    content: "\e923";
                    color: #fcb839;
                }
            }
        }

        .right {
            padding-right: 8px;

            .label {
                cursor: pointer;
                font-size: .71429rem;
                color: #122225;
            }

            .remove {
                cursor: pointer;
                color: #6a6a6a;
                font-size: 13px;
                margin-right: 15px;

                .el-icon {
                    margin-right: 3px;
                    color: #6a6a6a;
                }
            }

            .remove:hover {
                color: #b51a28;

                .el-icon {
                    color: #b51a28;
                }
            }
        }
    }

    .list {
        display: flex;
        padding: 10px;
        margin-bottom: 0;
    }

    .list-item {
        font-size: 13px;
        font-weight: 600;
        padding: 0 10px;
        white-space: nowrap;
        width: 15%;

        span.title {
            display: inline-block;
            margin-bottom: 10px;
            color: #2e2e2e;
            font-weight: 400;
        }
    }

    .item-price {
        width: 20%;
    }

    .item-volume {
        padding: 0 10px;
        width: 20%;
        border-left: solid 1px #e1e1e1;
    }

    .item-last {
        width: 29%;
    }
}

.range__data {
    display: flex;
    position: relative;
}

.range__data:before {
    content: "YR";
    position: absolute;
    top: 2px;
    // left: calc(50% - 5px);
    font-size: .57143rem;
    color: #c3c4c9;
}

.range__bar {
    display: block;
}

.range__bar .range__chart {
    width: 100%;
    height: 10px;
    position: relative;
    background-color: #e1e1e1;
}

.range__bar .range__chart:before {
    width: 1px;
    background-color: #fff;
    left: calc(50% - 1px);
    content: '';
    position: absolute;
    height: 100%;
    top: 0;
}

.range__bar .range__chart .current {
    position: absolute;
    top: 2px;
    height: 6px;
    width: 6px;
    border-radius: 100px;
    background-color: #367f2e;
    z-index: 1;
}

.range__bar .range__chart:after {
    width: 50%;
    left: 25%;
    border-right: solid 1px #fff;
    border-left: solid 1px #fff;
    content: '';
    position: absolute;
    height: 100%;
    top: 0;
}
</style>